<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
    </style>
</head>
<body>
    <div id="box" title="洛璃">
        <p>与你存在的日常，便是奇迹</p>
    </div>
    <button id="show">对话框</button>
    <script>
        let oDivBox = document.querySelector('#box'),
            dialogBox = document.querySelector('#show')

        //获取所有元素的子节点
        // console.log(oDivBox.childNodes);
        //获取节点名称
        // console.log(oDivBox.childNodes[0].nodeName);
        
        //常用  获取元素的所有子节点 (过滤文本节点)，返回存有元素节点的集合(类数组)
        console.log(oDivBox.children);
        // 获取元素的父元素节点,返回父元素节点对象
        console.log(oDivBox.parentNode);
        
        //创建元素节点
        let div = document.createElement("div")
        div.className = "dig"
        
        //插入到指定元素内
        oDivBox.appendChild(div)

        //删除节点(节点不能自删，通过父节点来删除子节点)
        div.onclick = function() {
            div.parentNode.removeChild(div)
        }
        /*
            节点类型：元素节点，属性节点，文本节点...

            操作节点：
                创建节点
                添加节点
                删除节点

            JS的DOM操作是比较消耗性能的，因此我们在编写的时候尽量减少DOM操作
            仅需要添加一段文本内容时，推荐使用innerHTML
            需要添加元素节点，并且要给元素节点设置动态的逻辑时，例如设置事件，推荐创建节点createElement
        */
    </script>
</body>
</html>